<template>
    <div>
        <div class="sidebar-div">
            <v-sidebar :items="items"/>
        </div>
        <div class="container">

            <el-form label-width="120px">

                <!-- 讲师头像 -->
                <el-form-item label="头像">
                    <!-- 头衔缩略图 -->
                    <pan-thumb :image="user.portrait"/>
                    <el-button
                            type="primary"
                            icon="el-icon-upload"
                            @click="imagecropperShow=true">上传头像
                    </el-button>
                </el-form-item>

                <el-form-item label="账户名">
                    <el-col :span="8">
                        <el-input v-model="user.account" width="100"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="性别">
                    <el-radio-group v-model="user.gender">
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="职业">
                    <el-col :span="16">
                        <el-input v-model="user.professional"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="电话">
                    <el-col :span="8">
                        <el-input v-model="user.phoneNum"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="邮箱">
                    <el-col :span="8">
                        <el-input disabled="disabled" v-model="user.email"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="出生日期">
                    <el-date-picker v-model="user.birthday" type="date">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="兴趣爱好">
                    <el-input id="input-textarea" :rows="6" v-model="user.interest" type="textarea" maxlength="50"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="save()" id="add-user-btn" size="medium">保存</el-button>
                </el-form-item>

            </el-form>
        </div>

        <!--上传头像组件-->
        <div id="image-upload">
            <image-upload field="img"
                          @crop-success="cropSuccess"
                          @cropUploadSuccess="cropUploadSuccess"
                          v-model="imagecropperShow"
                          :width="300"
                          :height="300"
                          url="/api/user/uploadPortrait"
                          :headers="headers"
                          :noSquare="true"
                          :key="imagecropperKey"
                          :noRotate="false"
                          img-format="png">
            </image-upload>
        </div>
    </div>


</template>

<script>

    // 引入图片上传组件
    import ImageCropper from '@/components/ImageCropper'
    import PanThumb from '@/components/PanThumb'

    import vSidebar from "@/components/Sidebar";
    import user from "@/api/user/user"
    import ImageUpload from "vue-image-crop-upload"


    export default {

        components: {
            'image-upload': ImageUpload,
            PanThumb
        },
        data() {
            return {
                user: {},
                imageUrl: '',
                // 上传弹窗按钮是否显示, 为true时可以弹出上传图片的页面
                imagecropperShow: false,
                // 上传组件唯一值(key值)
                imagecropperKey: 0,
                // 保存按钮是否禁用
                saveBtnDisabled: false,
                // 图片
                headers: {
                    smail: '*_~'
                },
                // the datebase64 url of created image
                cropperImgData: '',

                items: [
                    {
                        icon: "el-icon-user",
                        index: "userInfo",
                        title: "我的信息"
                    },
                    {
                        icon: "el-icon-refresh-right",
                        index: "resetPassword",
                        title: "重置密码"
                    },
                    {
                        icon: "el-icon-warning-outline",
                        index: "cancelAccount",
                        title: "注销账号"
                    }

                ]


            }
        },
        created() {
            // 如果路由中有参数值则执行此方法
            /*  if(this.$route.params && this.$route.params.id) {
                // 从路由中获取id值
                const id = this.$route.params.id
                // 调用根据id查询的方法
                this.getUserInfo(id)
              }*/
            this.getUserInfo()
        },
        watch: {  // 监听(解决路由切换问题)
            // 路由变化方式，路由发生变化即执行
            $route(to, from) {
                this.getUserInfo();
            }
        },
        methods: {
            getUserInfo() {
                this.user = JSON.parse(localStorage.getItem("SESSION_KEY_USER"));
                console.log(this.user)
                user.getUserInfo(this.user.id).then(response => {
                    this.user = response.data.item
                })
            },
            save() {
                this.$confirm("确定保存用户信息？", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {

                        user.checkAccountInfo(this.user.account,this.user.id).then(res => {
                            user.updateUserInfo(this.user).then(
                                response => {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    })
                                }
                            ).catch((response => {
                                console.log("error: " + response.message)
                            }))
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '账户名已经存在',
                            })
                        })

                    }
                ).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消保存',
                    })
                })
            },
            // 组件中对close()方法和cropSuccess()方法做了封装
            // 关闭上传图片弹窗
            close() {
                this.imagecropperShow = false
                // 将此值加1是为使图片上传插件每次进行初始化，否则如果上传完成后再次点击更换图片的话会显示已经保存，算是一个bug
                this.imagecropperKey = this.imagecropperKey + 1
            },
            // 裁剪成功后
            cropSuccess(data) {
                this.cropperImgData = data
                this.imagecropperShow = false
                this.imagecropperKey = this.imagecropperKey + 1
            },
            // 裁剪并且上传成功后
            cropUploadSuccess(jsonData, field) {
                // 上传图片后会返回url地址, 将这个地址的相对路径存入数据库
                console.log("upload ==> " + jsonData.data.item)
                this.user.portrait = jsonData.data.item;
            },
        }
    }
</script>

// scoped表示这里定义的样式只在当前页面范围内生效，不会污染到其他的页面
<style scoped>
    .container {
        margin: 20px;
    }

    #input-textarea {
        width: 300px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .content {

    }

    /*.container{
      position:relative;
      left: 150px;
      width:900px;
    }*/


</style>